<template>
  <div>
    <BasicModal
      :okText="$t('table.system.system_conform_save')"
      :title="$t('table.system.system_settle_config')"
      @register="registerModel"
      :minHeight="100"
      @ok="submitForm"
      :showCancelBtn="false"
      :cancelText="$t('business.common_cancel')"
    >
      <BasicForm @register="regiserForm" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { insertGlobeConfig, updateGlobeConfig } from '/@/api/commission/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const FORM_SIZE = useFormSetting().getFormSize;
  interface Options {
    label: String;
    value: Number;
  }
  const valueKey = ref('' as string);
  const seletOptions = ref<Options[]>([
    {
      label: t('business.common_off'),
      value: 0,
    },
    {
      label: t('table.system.system_auto_issue'),
      value: 1,
    },
    {
      label: t('table.system.system_people_issue'),
      value: 2,
    },
  ]);
  const seletDataOptions = ref<Options[]>([
    {
      label: t('table.system.system_dayliy_day'),
      value: 1,
    },
    {
      label: t('table.system.system_month_day'),
      value: 2,
    },
    {
      label: t('table.system.system_year_day'),
      value: 3,
    },
  ]);
  const schemasList: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      field: 'send_type',
      component: 'Select',
      label: t('table.system.system_issue_way'),
      required: true,
      componentProps: {
        options: seletOptions,
        getPopupContainer: () => document.body,
        allowClear: false,
        //mode: 'multiple',
      },
    },
    {
      field: 'commission_max_limit',
      component: 'Input',
      label: t('table.system.system_commission_limit'),
      componentProps: {
        placeholder: t('table.member.member_tip_placeholder'),
      },
    },
    {
      field: 'commission_settlement_type',
      component: 'Select',
      label: t('table.system.system_settle_way'),
      componentProps: {
        allowClear: false,
        options: seletDataOptions,
        getPopupContainer: () => document.body,
        //mode: 'multiple',
      },
    },
  ];
  const emit = defineEmits(['register', 'updataForm']);
  const [regiserForm, { setFieldsValue, validate, resetFields }] = useForm({
    schemas: schemasList,
    labelWidth: 120,
    showActionButtonGroup: false,
    baseColProps: {
      span: 20,
    },
    size: FORM_SIZE,
  });
  const props = defineProps({
    confGlobal: {
      type: Object,
      default: () => {},
    },
  });
  const [registerModel, { closeModal }] = useModalInner((data) => {
    console.log(props.confGlobal);
    valueKey.value = data.id;
    if (data.id) {
      setFieldsValue(props.confGlobal);
    }
  });
  async function submitForm() {
    const value = await validate();
    //console.log(value);
    const { status, data } = valueKey.value
      ? await updateGlobeConfig(value)
      : await insertGlobeConfig(value);
    if (status) {
      createMessage.success(data);
    } else {
      createMessage.error(data);
    }
    resetFields();
    closeModal();
    emit('updataForm');
  }
</script>
